<template>
  <div class="videoClass" v-if="videoSrc">
    <video ref="videoPlayer" preload="metadata" controls @ended="onVideoEnded" v-on:fullscreenchange="onFullscreenChange"
    v-on:webkitfullscreenchange="onFullscreenChange" >
      <source :src="videoSrc" type="video/mp4">
    </video>
    <!-- <el-button v-if="showclose" class="close-video" circle @click="close">
      <el-icon><Close /></el-icon>
    </el-button> -->
    
  </div>
</template>

<script>
export default {
  props: {
    videoSrc: {
      type: String,
      required: true
    }
  },
  data(){
    return {
      showclose: true
    }
  },
  mounted() {
    // this.$refs.videoPlayer.play()
    // this.$refs.videoPlayer.requestFullscreen()
  },
  methods:{
    close(){
      this.showclose = false
      this.onVideoEnded()
    },
    onVideoEnded(){
        // 获取视频播放器的DOM元素
      const videoPlayer = this.$refs.videoPlayer;
      
      // 设置播放器的大小，例如宽度和高度
      videoPlayer.style.width = '300px'; // 设置宽度
      videoPlayer.style.height = '200px'; // 设置高度
      
    },
    onFullscreenChange(){
      if (document.fullscreenElement || document.webkitFullscreenElement) {
        // 全屏状态
        console.log('Video is in fullscreen mode');
      } else {
        console.log('Video is not in fullscreen mode');
        // this.showclose = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
.videoClass {
    position: relative;
    video{
        width: 100%;
        height: 784px;
        object-fit: fill
    }
    .close-video{
      position: absolute;
      top: 100px;
      right: 10px;
      z-index: 100;
    }
}
</style>